<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item style="">功能模块</a-breadcrumb-item>
    <a-breadcrumb-item style="">教室人流反馈</a-breadcrumb-item>
  </a-breadcrumb>
  <a-form :model="query" layout="vertical">
    <a-form-item
      ><span>查询教室</span>
      <a-select
        v-model:value="query.c_address"
        show-search
        style="width: 200px"
        :filter-option="filterOption"
        @focus="handleFocus"
        @blur="handleBlur"
        @change="getData"
      >
        <a-select-option v-for="branch in classMap" :key="branch.c_address">{{
          branch.c_address
        }}</a-select-option></a-select
      ></a-form-item
    ></a-form
  >
  <div id="feedback" :style="{ width: '100%', height: '550px' }"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { ref, reactive, computed, defineComponent, onMounted } from "vue";
import { useRouter } from "vue-router";
import { get, put, del, post, getBlob, tip, removeLocalToken } from "@/common";

const query = reactive({
  c_address: "",
});
const suggest = reactive({
  itext: "",
});
const classMap = ref();
const pieData = [];
const getClassList = () => {
  get("/classroom/feedback/classroomList").then((res) => {
    classMap.value = res.data;
  });
};
getClassList();
const getData = () => {
  pieData.splice(0, pieData.length);
  get("/classroom/feedback", query).then((res) => {
    for (let obj in res.data) {
      pieData.push(
        { value: res.data[obj]["up"], name: "超出" },
        { value: res.data[obj]["down"], name: "低于" },
        { value: res.data[obj]["between"], name: "中间" }
      );
      if (
        res.data[obj]["up"] > res.data[obj]["down"] &&
        res.data[obj]["up"] > res.data[obj]["between"]
      ) {
        suggest.itext = "当前课堂到课率很高,学生态度积极认真,教学方法成功";
      }
      if (
        res.data[obj]["down"] > res.data[obj]["up"] &&
        res.data[obj]["down"] > res.data[obj]["between"]
      ) {
        suggest.itext = "当前课堂到课率较低,建议老师检查到课人数,改进教学方法";
      }
      if (
        res.data[obj]["between"] > res.data[obj]["down"] &&
        res.data[obj]["between"] > res.data[obj]["up"]
      ) {
        suggest.itext = "当前课堂出勤率不高,建议老师提醒同学按时上课";
      }
    }
    console.log(suggest);
    tip.success(suggest.itext, 10);
    mc();
  });
};

const mc =
  // () => {onMounted(
  () => {
    // 需要获取到element,所以是onMounted的Hook
    let myChart = echarts.init(document.getElementById("feedback"));
    // 绘制图表
    myChart.setOption({
      series: [
        {
          name: "访问来源",
          type: "pie", // 设置图表类型为饼图
          radius: "90%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
          data: pieData,
        },
      ],
    });
    window.onresize = function () {
      // 自适应大小
      myChart.resize();
    };
  };
//   );
// };
</script>
